<template>
  <div class="">、
    <h1>Stock Price</h1>
    <div>
      <button @click="senMessage">发送消息</button>
      <ul>
        <li v-for="m in list1" :key="m.name">{{ m.name }}: {{ m.price }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import SockJS from 'sockjs-client'
  import Stomp from 'webstomp-client'
  export default {
    name: 'websocket-test',
    data() {
      return {
        list1: [],
        stompClient: null

      }
    },
    mounted() {
      this.initWebSocket()
    },
    methods: {
      senMessage() {
        this.stompClient.send('/app/hello')
      },
      initWebSocket() {
        this.connection()
        // 需要有一个失败重连得到问题
      },
      connection() {
        // 更换that指针
        const socket = new SockJS('/webSocket')
        this.stompClient = Stomp.over(socket)
//建立连接，订阅主题
        this.stompClient.connect({}, (frame) => {
          console.log("test================================")
          console.log(frame)
          this.stompClient.subscribe('/topic/getResponse', (val) => {
            // this.list1 = JSON.parse(val.body)
            console.log('-------++++++++++++++++++++++++++++++------------')
//下面会报错，应该是json的问题，但是数据可以接收到
            console.log(val.body)
          })
        })
        // 回调函数 3 end
      }
    }
  }
</script>
